
<template>
	<view class="page">
		<image class="page-bg" src="../../static/images/other/jifenBg.png" mode="widthFix"></image>
		<view class="rule">
			规则
		</view>
		<view class="tips">
			参与100%中奖
		</view>	
		<view class="box">
			<image class="jifenItem" src="../../static/images/other/jifenItem.png" mode=""></image>
		</view>
		<view class="join-btn" @click="confirmShow=true">
			<image src="../../static/images/other/jifenBtn.png" class="" mode=""></image>
			100积分参与
		</view>
		<view class="newsArr">
			<!-- <image src="../../static/images/other/news.png" mode=""></image> -->
			<view class="newsText">
				<u-notice-bar mode="horizontal" bg-color="#fff" :list="noticeList"></u-notice-bar>
				
			</view>
		</view>
		<view class="typeArr">
			<view class="typeItem" v-for="(item,index) in typeArr" :key="index" @click="changeTypeArr(item.type)">
				<view :class="item.type==activeType ? 'activeItem' : '' ">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="content-box" v-show="activeType==1">
			<view class="contentItem">
				<view class="cover">
					<image class="coverImg" src="../../static/images/index/tabItem1.png" mode=""></image>
				</view>
				<view class="info">
					<view class="title">
						飞天43%vol 500ml贵州茅台酒
					</view>
					<view class="desc">
						价值2599元
					</view>
				</view>
			</view>
		</view>
		<view class="content-box" v-show="activeType==2">
			<view class="userItem">
				<view class="userCover">
					<image  src="../../static/images/prefile/tuiguang.png" mode=""></image>
				</view>
				<view class="name">
					132****1231
				</view>
				<view class="prize">
						飞天43%vol 500ml贵州茅台酒
				</view>
			</view>
		</view>
		
		<u-modal v-model="confirmShow" title="确认参与" :title-style="titleStyle" show-cancel-button :confirm-style="confirmBtnStyle" :cancel-style="cancelBtnStyle" @confirm="joinConfirm">
					<view class="slot-content">
						确认消耗100积分参与抽奖？
					</view>
		</u-modal>
		<u-modal v-model="prizeShow" title="恭喜您，中奖啦" :title-style="prizeTitleStyle"  :confirm-style="confirmBtnStyle" >
					<view class="prize-content">
						<view class="contentItem">
							<view class="cover">
								<image class="coverImg" src="../../static/images/index/tabItem1.png" mode=""></image>
							</view>
							<view class="info">
								<view class="title">
									飞天43%vol 500ml贵州茅台酒
								</view>
								<view class="desc">
									价值2599元
								</view>
							</view>
						</view>
					</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				typeArr:[
					{
						type: 1,
						text: "奖品"
					},
					{
						type: 2,
						text: "中奖记录"
					},
				],
				activeType: 1,
				confirmShow: false,
				titleStyle:{
					background : '#FFF9E6', 
					fontWeight: 600,
					paddingBottom: '30rpx',
				},
				 prizeTitleStyle:{
					color: '#FE5E10',
					fontSize: '43rpx',
					background : '#FFF9E6', 
					fontWeight: 600,
					paddingBottom: '30rpx',
				},
				confirmBtnStyle:{
					background : '#FE5E10',
					color: '#fff',
					borderRadius: '20rpx',
					margin : '20rpx 40rpx',
				},
				cancelBtnStyle:{
					background : '#fff',
					color: '#C0C0C0',
					borderRadius: '20rpx',
					margin : '20rpx 40rpx',
				},
				 prizeShow: false,
				 noticeList:[
					 '恭喜用户132****1231抽中88.88元现金红包'
				 ]
			};
		},
		methods:{
			changeTypeArr(_type){
				this.activeType = _type
			},
			joinConfirm(){
				console.log('抽奖');
				
			},
		},
		onLoad() {
		},
		onShow() {
		}
	}
</script>

<style lang="scss" scoped>
	
/deep/ .u-model__footer{
	background-color: #FFF9E6 ;
	padding-bottom: 40rpx;
}
// 抖动
@keyframes jitter {
	10%, 40%, 
	70% {
		transform: rotateX(60deg)
	}
	20%, 50%,
	80% {
		transform: rotateY(30deg)
	}
	30%, 60%,
	90% {
		transform: rotateX(-60deg)
	}
	40%, 70%,
	99% {
		transform: rotateY(-30deg)
	}
	100% {
		transform: rotate(0, 0)
	}
	// 30%, 60%,
	// 90% {
	// 	transform: skewX(0deg) skewY(0deg) translate(-50%, -80%)
	// }
	
}

.jifenItem{
	 animation-name: jitter;
	  animation-duration: 3s;
	  // animation-iteration-count: infinite;//无限循环
	  animation-iteration-count: 1;//无限循环
	  animation-timing-function: linear;
	  // animation-play-state:paused;
	  // animation-delay: 3s;
}

.page{
	width: 100%;
	position: relative;
	@include flexCol;
	align-items: center;
	font-family: PingFang SC;
	.page-bg{
		position: absolute;
		z-index: -1;
		width: 100%;
	}
	.rule{
		position: absolute;
		right: 0;
		top: 22%;
		width: 47rpx;
		height: 84rpx;
		background: #93AAB2;
		border-radius: 20rpx 0 0 20rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		padding-top: 7rpx;
	}
	.tips{
		font-size: 23rpx;
		font-weight: bold;
		font-style: italic;
		color: #FE5E10;
		line-height: 17px;
		width: 187rpx;
		height: 38rpx;
		background: #FEF5F2;
		border: 1px solid #FE5E10;
		opacity: 0.5;
		border-radius: 5px;
		@include flexCenter;
		margin-top: 179rpx;
	}
	.box{
		width: 160rpx;
		height: 139rpx;
		margin-top: 100rpx;
		image{
			width: 160rpx;
			height: 139rpx;
		}
	}
	.join-btn{
		width: 322rpx;
		height: 99rpx;
		margin-top: 150rpx;
		position: relative;
		@include flexCenter;
		font-size: 40rpx;
		color: $themeColor;
		font-weight: 600;
		image{
			width: 322rpx;
			height: 99rpx;
			position: absolute;
			z-index: -1;
		}
	}
	.newsArr{
		margin-top: 30rpx;
		width: 700rpx;
		height: 84rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 15rpx 20rpx;
		display: flex;
		align-items: center;
		image{
			width: 47rpx;
			height: 47rpx;
			margin-right: 20rpx;
		}
		.newsText{
			font-size: 24rpx;
			color: #000;
			font-weight: 400;
		}
	}
	.typeArr{
		margin-top: 14rpx;
		display: flex;
		width: 700rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		.typeItem{
			flex: 1;
			@include flexCenter;
			background-color: #fff;
			color: #636363;
			font-size: 30rpx;
			.activeItem{
				background-color: $themeColor;
				@include flexCenter;
				width: 100%;
				height: 100%;
				color: #fff;
			}
		}
	}
	.content-box{
		width: 700rpx;
		margin-bottom: 30rpx;
		min-height: 300rpx;
		background-color: #fff;
		padding: 20rpx;
		.contentItem{
			background-color: #fff;
			height: 214rpx;
			border-bottom: 2rpx solid #eee;
			display: flex;
			align-items: center;
			.cover{
				width: 142rpx;
				height: 142rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;
				image{
					width: 142rpx;
					height: 142rpx;
				}
			}
			.info{
				@include flexCol;
				.title{
					font-size: 28rpx;
					color: #000000;
					font-weight: 600;
					margin-bottom: 33rpx;
				}
				.desc{
					color: #777575;
				}
			}
		}
		.userItem{
			background-color: #fff;
			height: 134rpx;
			border-bottom: 2rpx solid #eee;
			display: flex;
			align-items: center;
			.userCover{
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				margin: 0 15rpx;
				image{
					border-radius: 50%;
					width: 66rpx;
					height: 66rpx;
				}
			}
			.name{
				flex: 1;
				font-size: 28rpx;
				color: #000;
			}
			.prize{
				width: 51%;
				color: $themeColor;
				@include overflowEll;
			}
			
		}
	}

	.slot-content{
		height: 172rpx;
		border-top: 2rpx solid #eee;
		@include flexCenter;
		background-color: #FFF9E6;
	}
	.prize-content{
		@include flexCenter;
		background-color: #FFF9E6;
		padding: 30rpx 40rpx;
		.contentItem{
			background-color: #fff;
			height: 183rpx;
			border-bottom: 2rpx solid #eee;
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			.cover{
				width: 142rpx;
				height: 142rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;
				image{
					width: 142rpx;
					height: 142rpx;
				}
			}
			.info{
				@include flexCol;
				.title{
					font-size: 28rpx;
					color: #000000;
					font-weight: 600;
					margin-bottom: 33rpx;
				}
				.desc{
					color: #777575;
				}
			}
		}
	}
}

</style>
